<!-- src/components/MarkdownRenderer.vue -->
<template>
  <div v-html="renderedMarkdown"></div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { marked } from 'marked'; // 使用命名导入

import katex from "katex";
import "katex/dist/katex.min.css";

// 接收Markdown文本
const props = defineProps({
  markdown: {
    type: String,
    required: true
  }
});

// 渲染后的HTML内容
const renderedMarkdown = ref("");

// 渲染Markdown内容并处理公式
const renderMarkdown = () => {
  // 使用 marked 解析 Markdown
  let htmlContent = marked(props.markdown);

  // 替换块级公式
  htmlContent = htmlContent.replace(
      /\$\$(.*?)\$\$/gs, // 匹配块级公式
      (_, formula) => `<div class="katex-block">${katex.renderToString(formula)}</div>`
  );

  // 替换行内公式
  htmlContent = htmlContent.replace(
      /\$(.*?)\$/gs, // 匹配行内公式
      (_, formula) => `<span class="katex-inline">${katex.renderToString(formula)}</span>`
  );

  renderedMarkdown.value = htmlContent;
};

// 监听 markdown 内容的变化并重新渲染
watch(() => props.markdown, renderMarkdown, { immediate: true });
</script>

<style scoped>
.katex-inline {
  font-size: 1.1em;
  vertical-align: middle;
}

.katex-block {
  display: block;
  margin: 20px 0;
  text-align: center;
}
</style>
